<template>
  <a-modal
    :title="form && form.id ? '修改角色' : '新建角色'"
    centered
    width="55vw"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="form"
                    :rules="rules" v-bind="formLayout" labelAlign="left">
        <a-form-model-item ref="name" label="名称" prop="name">
          <a-input :disabled="disabled" v-model="form.name"/>
        </a-form-model-item>
        <a-form-model-item ref="code" label="编码" prop="code">
          <a-input :disabled="disabled" v-model="form.code"/>
        </a-form-model-item>
        <a-form-model-item ref="remark" label="备注" prop="remark">
          <a-input :disabled="disabled" v-model="form.remark"/>
        </a-form-model-item>
        <a-form-model-item ref="menu" label="菜单" prop="menu">
          <a-tree-select
            :disabled="disabled"
            tree-checkable
            treeCheckStrictly
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :replaceFields="{children:'children', title:'name', key:'id', value: 'id' }"
            v-model="form.menu"
            :tree-data="treeData"
            tree-default-expand-all
          />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { getList } from '@/api/menu'
import clonedeep from 'lodash.clonedeep'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19}
      }
    }
    return {
      treeData: [],
      form: {
        id: undefined,
        name: undefined,
        remark: undefined,
        menu: [],
      },
      disabled: false,
      rules: {
        name: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.$watch('model', () => {
      this.disabled = this.model.disabled
      this.form = {
        ...this.form,
        ...this.model
      };
    })
    this.getMenuList()
  },
  methods: {
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const form = clonedeep(this.form);
          const menuIds = form.menu.map(item => item.value).join(',')
          this.$emit('ok', {
            ...this.form,
            menu: menuIds,
          })
        } else {
          return false;
        }
      });
    },
    getMenuList() {
      getList().then(ret => {
        this.treeData = ret.data
      })
    },
    resetFields() {
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>
